﻿<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="RepeaterTest._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/Itellu.Javascript.jquery.ui.js" type="text/javascript"></script>               
    <script src="Scripts/Itellu.Javascript.jquery.lv.pager.js" type="text/javascript"></script>   
    <script src="Scripts/Itellu.Javascript.jquery.lv.repeater.js" type="text/javascript"></script>
    <script src="Scripts/Itellu.Javascript.jquery.blockUI.js" type="text/javascript"></script>
    <script src="PagerDemo/jquery.pager.js" type="text/javascript"></script>    
    <link href="PagerDemo/Pager.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        欢迎使用 ASP.NET!
    </h2>
    <p>
        若要了解关于 ASP.NET 的详细信息，请访问 <a href="http://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。</p>
    <input type="button" value="获取数据" id="btnClick" />
    <div id="dataLoader">
    </div>
    <div  style="width:200px;"><div><span >用户名</span><span>密码</span></div><div id="uirepeater"><!--<span title='[name]'>[name]||[pwd]</span>--></div></div>
    <table id="temp">
        <thead>
            <tr>
                <th>
                    用户名
                </th>
                <th>
                    密码
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>
                    [__index]
                </td>
                <td>[pwd]</td>
            </tr>-->
        </tbody>
    </table>
    <div id="pager" psize="10" ></div>
    <table id="grid">
        <thead>
            <tr>
                <th>
                    用户名
                </th>
                <th>
                    密码
                </th>
            </tr>
        </thead>
         <tbody>
        <!-- <tr><td>[name]</td><td>[pwd]</td></tr>-->
        </tbody>
    </table>
    <p>
        您还可以找到 <a href="http://go.microsoft.com/fwlink/?LinkID=152368" title="MSDN ASP.NET 文档">
            MSDN 上有关 ASP.NET 的文档</a>。
    </p>
    <script type="text/javascript">
        $(function () {

            $("#btnClick").click(function () {
//                $("#temp>tbody:first").block({
//                    message: '<h1>数据加载中...</h1>',
//                    css: {
//                        border: '3px solid #95bce3'
//                    }
//                })
                var $tbody = $("#temp>tbody:first");
                $("#uirepeater").template({ autoBind: false });
                $tbody.template({ autoBind: false });
                var pcount = 0;
                $.getJSON("DataTest.ashx?t=" + new Date() + "&pindex=1" + "&psize=" + $("#pager").attr("psize"), function (data) {
                    pcount = data.GridData.pager.itemCount;
                    $("#pager").pager({ pagenumber: 1, pagecount: pcount, buttonClickCallback: PageClick });
                    $tbody.template("bindData", data.GridData.rows);
                   // $("#temp>tbody:first").unblock();
                })
                PageClick = function (pageclickednumber) {
                    $("#pager").pager({ pagenumber: pageclickednumber, pagecount: pcount, buttonClickCallback: PageClick });
                    //                                    $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: function () {
                    $.getJSON("DataTest.ashx?t=" + new Date() + "&pindex=" + pageclickednumber + "&psize=" + $("#pager").attr("psize"), function (data) {
                        $tbody.template("bindData", data.GridData.rows);
                    })


                    // } 
                    //});

                }
                //                $.getJSON("DataTest.ashx?t=" + new Date(), function (data) {
                //                    $("#uirepeater").template("bindData", data.list);
                //                    $("#uirepeater").unblock();
                //                })

                // refresh();
            })
            ////            var refresh = function () {
            ////                var $grid = $("#grid");
            ////                var pindex, psize = 0;
            ////                if (!$grid.data("even-init")) {
            ////                    $grid.data("even-init", true);
            ////                    $grid.grid({
            ////                    showPager:true,
            ////                        jScrollPane: false,
            ////                        fixHeader: false,
            ////                        jsonData: function (dataReady, index, size) {
            ////                            index=index || 1;
            ////                            size = size || 2;
            ////                            $.getJSON("DataTest.ashx?t=" + new Date() + "&pindex=" + index + "&psize=" + size, function (data) {
            ////                                dataReady(data);
            ////                            });
            ////                        }
            ////                    });
            ////                }
            ////            }

        })        

    </script>
</asp:Content>
